<template>
  <div>
    <el-dialog :visible.sync="addEditIsDialog_c" width="130rem !important" @close="resetForm">
      <div class="nx-content">
        <div class="search-box">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline form">
            <el-form-item label="调整单号:">{{ searchForm.code }}</el-form-item>
            <el-form-item label="公司名称">
              <el-input v-model="searchForm.companyName" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="上车日期">
              <el-date-picker v-model="searchForm.createDate" type="date" :editable="false" placeholder="" align="right"
                :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"
                readonly>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="车辆" label-width="8.5rem">
              <el-input v-model="searchForm.carNumber" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="司机" label-width="8.5rem">
              <el-input v-model="searchForm.carUser" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="装鱼单兵" label-width="8.5rem">
              <el-input v-model="searchForm.workUser" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="卸鱼单兵" label-width="8.5rem">
              <el-input v-model="searchForm.workOutName" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="起运地" label-width="8.5rem">
              <el-input v-model="searchForm.startAddress" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="装鱼日期">
              <el-date-picker v-model="searchForm.workInDate" type="date" :editable="false" placeholder="" align="right"
                :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"
                readonly>
              </el-date-picker>
            </el-form-item>

            <el-form-item v-if="type == 1" label="卸鱼日期" label-width="8.5rem">
              <el-date-picker v-model="searchForm.workOutDate" type="date" :editable="false" placeholder="" align="right"
                :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"
                readonly>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" label-width="8.5rem">
              <el-input v-model="searchForm.remark" placeholder="" class="remark"></el-input>
            </el-form-item>
            <el-col>

              <el-form-item label="装鱼单兵时间：">
                <el-date-picker v-model="searchForm.workInTime" type="date" :editable="false" placeholder="" align="right"
                  :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"
                  readonly>
                </el-date-picker>
              </el-form-item>
              <el-form-item label="卸鱼单兵时间：">
                <el-date-picker v-model="searchForm.workOutTime" type="date" :editable="false" placeholder=""
                  align="right" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  style="width: 100%" readonly>
                </el-date-picker>
              </el-form-item>
            </el-col>

          </el-form>
        </div>
        <div class="center-box">
          <div v-if="type == 0" class="center-title">&nbsp;转出详情信息</div>
          <div v-if="type == 1" class="center-title">&nbsp;转入详情信息</div>
          <div class="right">
            <el-button v-if="type == 0 && fishState == 0" class="btn" type="primary" @click="handleAdd">新增</el-button>
          </div>
        </div>
        <div class="center-content">
          <NxTablePad :table-cols="type == 0 ? tableColsOut : tableColsIn" :table-data="tableData" :pagInationIf="false"
            :height="'33.1rem'" :isIndex="true" class="table-wrap">
            <template slot="sex" slot-scope="scope">
              <span v-if="scope.row.sex == 0">未鉴定</span>
              <span v-if="scope.row.sex == 1">雄</span>
              <span v-if="scope.row.sex == 2">雌</span>
            </template>
            <template slot="operation" slot-scope="scope">
              <span v-if="type == 0 && fishState == 0" @click="handleEdit(scope.row)" style="font-size: 1.86rem"
                class="nx-btn nx-edit">编辑</span>
              <span v-if="type == 0 && fishState == 1 && scope.row.leftNum != 0" @click="handleFishOut(scope.row)"
                style="font-size: 1.86rem" class="nx-btn nx-edit">出鱼</span>
              <span v-if="(type == 1 && fishState != 2) || (type == 0 && fishState == 0)
                " @click="handleDelete(scope.row)" style="font-size: 1.86rem" class="nx-btn nx-del">删除</span>
            </template>
          </NxTablePad>
        </div>
        <div class="bottom-content">
          <div class="left"></div>
          <div class="right">
            <el-button v-if="(type == 1 && fishState != 2) || fishState == 0" class="btn-light-blue btn"
              @click="handleApproval" :disabled="this.tableData.length == 0">审 批</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- <AddFishType :addEditId="addEditId" :carTransferOrderId="carTransferOrderId" :addEditStatus="addEditStatus"
      :addFishTypeIsDialog="addFishTypeIsDialog" :companyId="companyId" :baseId="baseId"></AddFishType>\ -->
    <outFishType :addEditId="addEditId" :carTransferOrderId="carTransferOrderId" :addEditStatus="addEditStatus"
      :addFishTypeIsDialog="addFishTypeIsDialog" :companyId="companyId" :baseId="baseId"> </outFishType>
  </div>
</template>
<script>
import NxTablePad from '@/components/NxTablePad.vue'
// import AddFishType from './addFishType.vue'
import outFishType from './outFishType.vue'
import {
  getDataCarTransferOrderInDetailPadList,
  approveDataCarTransferOrderInDetailPad,
  approveDataCarTransferOrderPad,
  delDataCarTransferOrderInDetail,
  delDataCarTransferOrderOutDetail,
} from '@/api/allot'
export default {
  components: {
    NxTablePad,
    // AddFishType,
    outFishType
  },
  props: {
    companyId: {
      type: String,
      default: '',
    },
    baseId: {
      type: String,
      default: '',
    },
    carTransferOrderId: {
      type: String,
      default: '',
    },
    type: {
      type: Number,
    },
    fishState: {
      type: Number,
    },
    addAllotDetailIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchForm: {
        companyName: '',
        createDate: '',
        carNumber: '',
        carUser: '',
        workUser: '',
        workInDate: '',
        workOutDate: '',
        startAddress: '',
        remark: '',
        workInTime: '',
        workOutTime: '',
        workOutName: ''
      },
      ruleForm: {
        companyId: '',
        baseId: '',
      },
      tableColsIn: [
        {
          label: '基地名称',
          prop: 'baseName',
          align: 'center',
        },
        {
          label: '鱼池名称',
          prop: 'fishpondName',
          align: 'center',
        },
        {
          label: '鱼编码',
          prop: 'fishCode',
          align: 'center',
        },
        {
          label: '批次编码',
          prop: 'batchCode',
          align: 'center',
        },
        {
          label: '性别',
          slot: 'sex',
          align: 'center',
        },
        {
          label: '卵径',
          prop: 'diameter',
          align: 'center',
        },
        {
          label: '尾数',
          prop: 'num',
          align: 'center',
        },
        {
          label: '初重',
          prop: 'weightPrime',
          align: 'center',
        },
        {
          label: '均重',
          prop: 'weightAve',
          align: 'center',
        },
        {
          label: '总重',
          prop: 'weight',
          align: 'center',
        },
        {
          label: '操作',
          slot: 'operation',
          align: 'center',
          width: '220',
          fixed: 'right',
        },
      ],
      tableColsOut: [
        {
          label: '基地名称',
          prop: 'baseName',
          align: 'center',
        },
        {
          label: '鱼池名称',
          prop: 'fishpondName',
          align: 'center',
        },
        {
          label: '鱼名',
          prop: 'fishName',
          align: 'center',
        },
        {
          label: '类型',
          prop: 'fishCode',
          align: 'center',
        },
        {
          label: '批次',
          prop: 'batchCode',
          align: 'center',
        },
        {
          label: '性别',
          slot: 'sex',
          align: 'center',
        },
        {
          label: '卵径',
          prop: 'diameter',
          align: 'center',
        },
        {
          label: '尾数',
          prop: 'num',
          align: 'center',
        },
        {
          label: '剩余数量',
          prop: 'leftNum',
          align: 'center',
        },
        {
          label: '初重',
          prop: 'weightPrime',
          align: 'center',
        },
        {
          label: '均重',
          prop: 'weightAve',
          align: 'center',
        },
        {
          label: '总重',
          prop: 'weight',
          align: 'center',
        },
        {
          label: '操作',
          slot: 'operation',
          align: 'center',
          width: '140',
          fixed: 'right',
        },
      ],
      tableData: [],
      addEditIsDialog_c: false, // 弹窗是否显示
      addEditStatus: 'add',
      addEditId: '', // 添加编辑rowid
      addFishTypeIsDialog: false,
      leftNum: 0, // 剩余数量
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
      },
    }
  },
  watch: {
    addAllotDetailIsDialog(val) {
      this.addEditIsDialog_c = val
      if (this.addEditIsDialog_c) {
        this.getList()
      }
    },
  },
  methods: {
    // 详情列表
    getList() {
      getDataCarTransferOrderInDetailPadList({
        carTransferOrderId: this.carTransferOrderId,
        type: this.type,
      }).then((res) => {
        if (res.code == 200) {
          this.searchForm = res.data
          if (this.type == 0) {
            res.data.list.sex =
              res.data.list.sex != undefined ? res.data.list.sex.toString() : ''
            this.tableData = res.data.list
          } else if (this.type == 1) {
            res.data.list1.sex =
              res.data.list1.sex != undefined
                ? res.data.list1.sex.toString()
                : ''
            this.tableData = res.data.list1
          }
        }
      })
    },
    //审批
    handleApproval() {
      if (this.type == 1) {
        this.$confirm('正在对该入库详情进行审批是否通过?', '提示', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            approveDataCarTransferOrderInDetailPad({
              id: this.carTransferOrderId,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
                this.$parent.closeAddEdit()
                this.$parent.getList()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      } else if (this.type == 0) {
        this.$confirm('正在对该出库详情进行审批是否通过?', '提示', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            approveDataCarTransferOrderPad({
              id: this.carTransferOrderId,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
                this.$parent.closeAddEdit()
                this.$parent.getList()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      }
    },
    // 取消
    resetForm() {
      this.$parent.closeAddEdit()
    },
    // 新增
    handleAdd() {
      this.addEditStatus = 'add'
      this.addFishTypeIsDialog = true
    },
    // 编辑
    handleEdit(row) {
      this.addEditId = row.id + ''
      this.addEditStatus = 'edit'
      this.addFishTypeIsDialog = true
    },
    // 出鱼
    handleFishOut(row) {
      this.addEditId = row.id + ''
      this.addEditStatus = 'fishOut'
      this.addFishTypeIsDialog = true
    },
    // 删除
    handleDelete(row) {
      if (this.type == 0) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            delDataCarTransferOrderOutDetail({ id: row.id }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
                this.getList()
              }
            })
          })
          .catch((err) => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      } else if (this.type == 1) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            delDataCarTransferOrderInDetail({ id: row.id }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
                this.getList()
              }
            })
          })
          .catch((err) => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      }
    },
    // 弹窗关闭
    closeAddEdit() {
      this.addFishTypeIsDialog = false
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.el-dialog__close {
  font-size: 3.69rem !important;
}

/deep/.el-dialog__body {
  font-size: 1.86rem !important;
}

.nx-content {
  width: 100% !important;
  height: 70rem !important;
  display: flex;
  flex-direction: column;
}

.search-box {
  border-radius: 0.5rem;
  width: 100%;
  height: 34%;
  border: 0.2rem solid #e4eaee;

  .form {
    /deep/.el-form-item {
      margin-top: 0.571429rem;
      margin-bottom: 0.571429rem;
    }

    /deep/.el-form-item__content {
      line-height: 3.657143rem;
      font-size: 1.86rem;
    }

    /deep/.el-input__inner {
      width: 20.64rem;
      height: 3.6rem;
    }

    /deep/ .el-form-item__label {
      font-size: 1.86rem;
      line-height: 3.6rem;
    }

    /deep/.el-input__icon {
      line-height: 3.857143rem;
    }

    /deep/.el-input {
      font-size: 1.86rem !important;
    }

    .remark {
      /deep/.el-input__inner {
        width: 52rem;
        height: 3.6rem;
      }
    }
  }
}

.el-form-item {
  padding-left: 1.5rem;
}

.center-box {
  margin-top: 0.6rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-left: 0.4rem solid #00c187;

  .center-title {
    display: flex;
    font-size: 2.36rem;
    align-items: center;
    font-family: MicrosoftYaHei;
    color: #22262e;
  }

  .btn {
    width: 9.65rem;
    height: 4.48rem;
    font-size: 2.19rem;
  }

  .right {
    height: 4.48rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button--primary {
      color: #fff;
      background-color: #0067c7;
      border-color: #0067c7;
    }
  }
}

.center-content {
  margin-top: 1rem;
  width: 100%;
  height: 60%;
  border: 0.2rem solid #e4eaee;
  padding-bottom: 1rem;
  border-bottom: 0.2rem solid #ebeff1;
}

.bottom-content {
  height: 4.38rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;

  // border: 1px solid red;
  .left {
    width: 45%;
    display: flex;
    justify-content: space-between;
    line-height: 4.48rem;
    font-size: 1.86rem;
  }

  .right {
    .btn {
      width: 9.65rem;
      height: 4.38rem;
      font-size: 2.16rem;
    }
  }
}
</style>
